<template>
  <div class="app-info-detail">
    <span>
      <img src="@\assets\images\guanzhu.png" alt="" />
      关注
    </span>
    <span>
      <img src="@\assets\images\star.png" alt="" />
      评价
      <span class="num">{{ detaillist.evaluate }}</span>
    </span>
    <span>
      <img src="@\assets\images\xinxi.png" alt="" />
      论坛
    </span>
  </div>
  <div class="banner-img">
    <ul>
      <li v-for="item in detaillist.middleurl" :key="item">
        <img :src="item" alt="" @load="gotoLoad()" />
      </li>
    </ul>
  </div>
  <h2 class="game-info">
    <span>简介</span>
    <span class="see-all" @click="showPopup">查看全部</span>
  </h2>
  <div class="tally1">
    <ul>
      <li v-for="value in detaillist.small" :key="value">
        <div>
          <span>{{ value }}</span>
          <van-icon name="arrow" />
        </div>
      </li>
    </ul>
  </div>
  <section v-html="detaillist.synopsis"></section>
  <van-popup
    v-model:show="show"
    closeable
    round
    position="bottom"
    :style="{ height: '66%' }"
  >
    <template #default>
      <h3 class="media-popup__header">简介</h3>
      <div class="media-popup__body">
        <p v-html="detaillist.synopsis"></p>
      </div>
    </template>
  </van-popup>
</template>

<script>
import { useStore } from "vuex";
import { ref, computed } from "vue";
import BScroll from "better-scroll";
export default {
  setup() {
    //获取store对象
    const store = useStore();
    //触发actions的方法
    const getDetailList = (val) =>
      store.dispatch("getDetailList", {
        id: val,
      });

    //获取详情页数据
    const detaillist = computed(() => store.state.detail.detaillist);

    //显示简介全部内容
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };

    //等待图片加载完后再进行滚动
    const gotoLoad = () => {
      new BScroll(".banner-img", {
        scrollX: true,
        scrollY: false,
      });
    };

    return {
      getDetailList,
      detaillist,
      show,
      showPopup,
      gotoLoad,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.app-info-detail {
  height: 32px;
  display: flex;
  font-size: 18px;
  color: #34c3c6;
  margin-top: 28px;
  & > span {
    padding: 0 25px;
    border-right: 1px solid #999;
    .flex();
    &:last-child {
      border-right: none;
    }
    img {
      width: 17px;
      height: 17px;
      margin-right: 4px;
    }
    .num {
      font-size: 15px;
      margin-left: 3px;
    }
  }
}
.tally1 {
  width: 100%;
  height: 27px;
  overflow: hidden;
  margin: 16px 0;
  display: flex;
  align-items: center;
  ul {
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0 17px;
    li {
      width: 86px;
      flex-shrink: 0;
      height: 100%;
      background-color: #f5f5f5;
      border-radius: 14px;
      font-size: 14px;
      color: #868c92;
      margin-right: 5px;
      &:last-child {
        margin-right: 0;
      }
      div {
        width: 100%;
        height: 100%;
        padding: 0 8px 0 8px;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
.banner-img {
  margin: 23px 0;
  width: 100%;
  height: 183px;
  overflow: hidden;
  ul {
    height: 100%;
    padding: 0 17px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    li {
      flex-shrink: 0;
      height: 100%;
      margin-right: 6px;
      &:last-child {
        margin-right: 0;
      }
      img {
        display: block;
        height: 100%;
      }
    }
  }
}
.game-info {
  height: 20px;
  padding: 0 17px;
  .flex(space-between, center);
  margin: 37px 0 17px;
  font-size: 21px;
  color: #34c3c6;
  .see-all {
    font-size: 15px;
  }
}
section {
  display: -webkit-box;
  padding: 0 17px;
  font-size: 14px;
  line-height: 22px;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
}
.media-popup__header {
  height: 60px;
  padding: 14px 16px;
  .flex(space-between, center);
  font-size: 16px;
  border-bottom: 1px solid #f5f5f5;
}
.media-popup__body {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  bottom: 0;
  padding: 14px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  p {
    font-size: 14px;
    line-height: 22px;
  }
}
</style>
